<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="5" :sm="24">
            <a-form-item label="所属年份">
              <a-date-picker
                placeholder="请选择年"
                mode="year"
                v-model="queryParam.year"
                :open="dataopen"
                format="YYYY"
                :allowClear="false"
                @openChange="openChangeYear"
                @panelChange="panelChangeYear"
              />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="标题">
              <a-input
                v-model="queryParam.title"
                allowClear
                style="width: 200px"
                placeholder="请输入标题"
                @change="getList"
              />
            </a-form-item>
          </a-col>
          <a-col :md="9" :sm="24">
            <a-form-item label="值班类型">
              <a-select
                v-model="queryParam.type"
                allowClear
                style="width: 200px"
                placeholder="请选择值班类型"
                @change="getList"
              >
                <a-select-option
                  v-for="(item, index) in dutyList"
                  :key="index"
                  :value="item.code"
                >
                  {{ item.value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-button @click="downloadTemplate()" style="margin-right: 50px"
              >下载值班表模板</a-button
            >
            <a-button type="primary" @click="$refs.addForm.add()"
              >导入值班表</a-button
            >
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      bordered
      :data-source="sourceData"
      :columns="columns"
      :rowKey="(record) => record._id"
    >
      <template slot="type" slot-scope="text">
        <span>{{
          dutyList.length && dutyList.filter((i) => i.code === text)[0].value
        }}</span>
      </template>
      <template slot="createTime" slot-scope="text">
        <span>{{ moment(text).format("YYYY-MM-DD HH:mm") }}</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-tooltip>
          <template slot="title"> 查看 </template>
          <a-icon
            type="eye"
            @click="$refs.detailForm.detail(record)"
            class="icon-info"
          />
        </a-tooltip>
        <a-divider type="vertical" />
        <a-tooltip>
          <template slot="title"> 下载 </template>
          <a-icon type="download" @click="download(record)" class="icon-info" />
        </a-tooltip>
        <a-divider type="vertical" />
        <a-popconfirm
          placement="topRight"
          title="确认删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="() => delRecord(record)"
        >
          <a-tooltip>
            <template slot="title"> 删除 </template>
            <a-icon type="delete" class="icon-info" />
          </a-tooltip>
        </a-popconfirm>
      </template>
    </a-table>
    <add-form ref="addForm" @ok="handleOk" />
    <download-form ref="downloadForm" @ok="handleOk" />
    <detail-form ref="detailForm" @ok="handleOk" />
  </a-card>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { downloadTemp, queryDutyList, deleteDuty, downloadDuty } from "@/api/system/duty";
import { queryOneDist } from "@/api/system/dist";
import AddForm from "./addForm";
import DownloadForm from "./downloadForm";
import DetailForm from "./detailForm";

const columns = [
  {
    title: "序号",
    align: "center",
    width: 70,
    customRender: (text, record, index) => {
      return `${index + 1}`;
    },
  },
  { title: "标题", dataIndex: "title", align: "left" },
  {
    title: "值班表类型",
    dataIndex: "type",
    align: "center",
    width: 200,
    scopedSlots: { customRender: "type" },
  },
  {
    title: "值班总负责",
    dataIndex: "chargePerson",
    align: "center",
    width: 200,
  },
  { title: "值班室电话", dataIndex: "phone", align: "center", width: 200 },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    width: 200,
    scopedSlots: { customRender: "createTime" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    align: "center",
    width: 160,
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  name: "duty",
  components: {
    AddForm,
    DownloadForm,
    DetailForm
  },
  data() {
    return {
      moment,
      dataopen: false, // 默认是否打开弹框
      // 查询参数
      queryParam: {
        year: "",
      },
      sourceData: [],
      // 表头
      columns,
      dutyList: [],
      fileList: [],
    };
  },
  created() {
    let year = new Date().getFullYear();
    this.queryParam.year = moment(year, "YYYY");
    this.sysDictTypeDropDown("duty_type");
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 点击选择框事件 弹出日期组件选择年
    openChangeYear(status) {
      if (status) {
        this.dataopen = true;
      } else {
        this.dataopen = false;
      }
    },
    // 选择年之后 关闭弹框
    panelChangeYear(value) {
      this.queryParam.year = value;
      this.dataopen = false;
      this.getList();
    },
    downloadTemplate() {
      downloadTemp().then((res) => {
        let ele = document.createElement("a");
        ele.download = "duty.xlsx";
        let blob = new Blob([res.data]);
        ele.href = URL.createObjectURL(blob);
        ele.click();
        URL.revokeObjectURL(ele.href);
      });
    },
    download(record) {
      downloadDuty({ _id: record._id }).then(res => {
        let ele = document.createElement("a");
        ele.download = record.title + '.xlsx';
        let blob = new Blob([res.data]);
        ele.href = URL.createObjectURL(blob);
        ele.click();
        URL.revokeObjectURL(ele.href);
      })
    },
    handleOk() {
      this.getList();
    },
    // 上传
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file, record) {
      this.fileList = [...this.fileList, file];
    },
    delRecord(record) {
      let _this = this;
      this.$confirm({
        okText: '确定',
        cancelText: '取消',
        content: '确定删除？',
        onOk() {
          deleteDuty({ _id: record._id }).then((res) => {
            if (res.data.success) {
              _this.$message.success("删除成功！");
              _this.getList();
            } else {
              _this.$message.error("删除失败！");
            }
          });
        },
        onCancel() {
          _this.destroyAll();
        }
      })
    },
    getList() {
      let param = Object.assign({}, this.queryParam);
      param.year = param.year.get("year");
      queryDutyList(param).then(({ data }) => {
        this.sourceData = data;
      });
    },
    // 获取字典数据
    async sysDictTypeDropDown(type) {
      await queryOneDist({ type }).then((res) => {
        this.dutyList = res.data.data[0].values.map((t) => {
          return {
            code: t.base,
            value: t.show,
          };
        });
      });
    },
  },
};
</script>

<style lang="scss">
.table-page-search-wrapper {
  margin-bottom: 20px;
}
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
.icon-info {
  color: #1890ff;
  cursor: pointer;
}
.icon-info:hover {
  color: #03396b;
}
// .ant-table-header tr{
//   height: 58px!important;
// }
</style>
